<!-- 侧边导航条 -->
<script lang="ts" setup>
import type { PropType } from 'vue'
import type { menuItem } from './types/SidebarNav'
import router from '@/router'

// 父传子：子props接收
defineProps({
  Menus: {
    type: Array as PropType<menuItem[]>, // 直接使用类型定义
    default: () => [] // Vue 会自动推导类型，不需要后接 `as MenusItem[]`
  }
})
// 获取路由中meta的icon信息
const getIcon = (item: menuItem) => {
  const res = router
    .getRoutes()
    .find((route) =>
      item.routeName ? route.name === item.routeName : route.path === item.path
    )
  return res?.meta?.icon
}
</script>
<template>
  <div class="nav-bg flex-fill">
    <!-- 左侧导航：导航和选项卡 -->
    <ul class="nav flex-column">
      <li class="nav-item py-1" v-for="item in Menus" :key="item.id">
        <router-link
          class="nav-link text-white-50 text-light d-flex align-items-center cursor"
          :to="item.routeName ? { name: item.routeName } : item.path"
          aria-current="page"
          ><i :class="[getIcon(item), 'pe-3 text-light']"></i>{{ item.name }}</router-link
        >
      </li>
    </ul>
  </div>
</template>
<style lang="scss" scoped>
.nav-item {
  &:hover {
    background: rgba(255, 255, 255, 0.3);
  }
  .active {
    background: rgba(255, 255, 255, 0.3);
  }
}
</style>
